<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>播放音频-使用Javascript</title>
</head>
<body>

<input type="button" value="播放音频" onclick="playAudio('https://dict.youdao.com/dictvoice?type=1&audio=tutorial')">
<button onclick="playAudio('https://dict.youdao.com/dictvoice?type=1&audio=tutorial')"><b>播放</b></button>


<!--
=> 是箭头函数的符号，用于定义一个匿名函数。
audio.play().catch(function(error) {
  console.error("播放音频时遇到问题：", error);
});
等价
audio.play().catch(error => {
  console.error("播放音频时遇到问题：", error);
});
为什么使用箭头函数？
简洁：箭头函数语法更简洁，省略了 function 关键字。
不绑定 this：箭头函数不会创建自己的 this，可以在需要保持 this 指向的情况下使用它（虽然这里 this 不会用到，但这是箭头函数的一个特性）。


-->
<script>
    function playAudio(url){
        //创建一个Audio对象
        const audio = new Audio(url);
        //播放音频
        audio.play().catch(error=>{
            console.error("播放音频时遇到问题: ",error);
        })
    // 这里的箭头函数用于处理 Promise 在播放音频时发生错误的情况，audio.play() 返回的是一个 Promise，如果播放失败，就会进入 .catch() 方法，并把错误信息传递到箭头函数中。
    // error 是箭头函数的参数，表示发生的错误。
    // => 是箭头函数的符号，用于定义一个匿名函数。
    // console.error("播放音频时遇到问题：", error); 是箭头函数的主体，用来打印错误信息到控制台。
    }
</script>

</body>
</html>